<template>
  <div class="simple-dashboard">
    <div class="top-section">
      <div class="unit-risk">
        <h3>单元风险</h3>
        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>生产单元</th>
              <th>风险级别</th>
              <th>风险预警时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in unitRisks" :key="index">
              <td>{{ item.id }}</td>
              <td>{{ item.unit }}</td>
              <td :class="getRiskLevelClass(item.riskLevel)">{{ item.riskLevel }}</td>
              <td>{{ item.warningTime }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="process-risk-prediction">
        <h3>装置工艺风险事件预测</h3>
        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>工艺风险事件</th>
              <th>预测时间</th>
              <th>事件发生可能性</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in processRiskPredictions" :key="index">
              <td>{{ item.id }}</td>
              <td>{{ item.event }}</td>
              <td>{{ item.predictionTime }}</td>
              <td :class="getLikelihoodClass(item.likelihood)">{{ item.likelihood }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="bottom-section">
      <h3>实时风险点位</h3>
      <div class="realtime-charts-grid">
        <div v-for="(chart, index) in realtimeCharts" :key="index" class="chart-item">
          <h4>{{ chart.title }}</h4>
          <div class="chart-container">
            <canvas :id="'chart' + (index + 1)"></canvas>
          </div>
          <p class="suggestion">**处理建议:** {{ chart.suggestion }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 Chart.js 库
import Chart from 'chart.js/auto'

export default {
  name: 'HomePage',
  data() {
    return {
      unitRisks: [
        {
          id: 1,
          unit: '原料准备与净化系统',
          riskLevel: '一般风险',
          warningTime: '2025-07-03 14:30',
        },
        { id: 2, unit: '尿素合成系统', riskLevel: '高风险', warningTime: '2025-07-03 15:00' },
        {
          id: 3,
          unit: '未反应物回收与循环系统',
          riskLevel: '低风险',
          warningTime: '2025-07-03 16:00',
        },
        { id: 4, unit: '尿素溶液浓缩系统', riskLevel: '一般风险', warningTime: '2025-07-03 16:30' },
      ],
      processRiskPredictions: [
        {
          id: 1,
          event: '甲醇洗测点3AIA_31206A异常升高',
          predictionTime: '2025-07-04 09:00',
          likelihood: '75%',
        },
        {
          id: 2,
          event: '3LT_3130 相反液位异常升高',
          predictionTime: '2025-07-04 10:15',
          likelihood: '19%',
        },
        {
          id: 3,
          event: '甲醇洗流量3FT_31210异常波动',
          predictionTime: '2025-07-04 11:30',
          likelihood: '16%',
        },
        {
          id: 4,
          event: '3AIA_31206B异常波动',
          predictionTime: '2025-07-04 13:00',
          likelihood: '10%',
        },
        {
          id: 5,
          event: 'PIC3312压强异常升高',
          predictionTime: '2025-07-04 14:00',
          likelihood: '85%',
        },
        {
          id: 6,
          event: '分析仪3AI_3111A测点异常波动',
          predictionTime: '2025-07-04 15:00',
          likelihood: '20%',
        },
        {
          id: 7,
          event: '分析仪3AT_3301B测点异常波动',
          predictionTime: '2025-07-04 16:00',
          likelihood: '15%',
        },
      ],
      realtimeCharts: [
        { title: '甲醇洗测点3AIA_31206A', suggestion: '检查测点信号，核对历史数据，进行校准。' },
        { title: '3LT_3130 相反液位', suggestion: '核查液位计，检查物料平衡，避免溢流风险。' },
        { title: '甲醇洗流量3FT_31210', suggestion: '检查流量计，排查管路堵塞或泄漏，调整泵速。' },
        { title: '3AIA_31206B', suggestion: '对比同类测点数据，进行分析仪校准，检查取样系统。' },
        { title: 'PIC3312压强', suggestion: '检查压力变送器，核对上下游阀门状态，调整控制参数。' },
        {
          title: '分析仪3AI_3111A',
          suggestion: '检查分析仪运行状态，进行例行维护，比对其他相关参数。',
        },
        {
          title: '分析仪3AT_3301B',
          suggestion: '确认分析仪采样回路，检查试剂消耗，联系仪表专业人员检查。',
        },
      ],
      chartsInstances: [], // 用于存储 Chart.js 实例
    }
  },
  mounted() {
    this.renderCharts()
  },
  methods: {
    getRiskLevelClass(riskLevel) {
      return {
        'low-risk': riskLevel === '低风险',
        'medium-risk': riskLevel === '一般风险',
        'high-risk': riskLevel === '高风险',
      }
    },
    getLikelihoodClass(likelihood) {
      const percentage = parseInt(likelihood)
      if (percentage >= 80) {
        return 'high-likelihood'
      } else if (percentage >= 60) {
        return 'medium-likelihood'
      } else {
        return 'low-likelihood'
      }
    },
    // 生成随机折线图数据
    generateChartData() {
      const labels = ['0h', '1h', '2h', '3h', '4h', '5h', '6h']
      const data = []
      for (let i = 0; i < 7; i++) {
        data.push(Math.floor(Math.random() * 50) + 50) // 50-100 之间的随机数
      }
      return { labels, data }
    },
    renderCharts() {
      this.chartsInstances.forEach((chart) => chart.destroy()) // 销毁旧图表实例
      this.chartsInstances = [] // 清空实例数组

      this.realtimeCharts.forEach((chart, index) => {
        const ctx = document.getElementById('chart' + (index + 1))
        if (ctx) {
          const chartData = this.generateChartData()
          const newChart = new Chart(ctx, {
            type: 'line',
            data: {
              labels: chartData.labels,
              datasets: [
                {
                  label: '数值',
                  data: chartData.data,
                  borderColor: '#42A5F5', // 使用一种中性的蓝色，突出数据
                  backgroundColor: 'rgba(66, 165, 245, 0.2)',
                  fill: true,
                  tension: 0.3, // 使线条更平滑
                },
              ],
            },
            options: {
              responsive: true,
              maintainAspectRatio: false, // 允许手动设置canvas尺寸
              plugins: {
                legend: {
                  display: false, // 不显示图例
                },
                tooltip: {
                  mode: 'index',
                  intersect: false,
                },
              },
              scales: {
                x: {
                  grid: {
                    display: false, // 不显示x轴网格线
                  },
                  ticks: {
                    color: '#666', // 坐标轴刻度文字颜色
                  },
                },
                y: {
                  grid: {
                    color: '#E0E0E0', // y轴网格线颜色
                  },
                  ticks: {
                    color: '#666',
                  },
                },
              },
            },
          })
          this.chartsInstances.push(newChart) // 保存图表实例
        }
      })
    },
  },
  beforeUnmount() {
    // 组件销毁前销毁所有 Chart.js 实例，防止内存泄漏
    this.chartsInstances.forEach((chart) => chart.destroy())
  },
}
</script>

<style scoped>
/* 字体改为更通用的无衬线字体 */
.simple-dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占满整个视口高度 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5; /* 浅灰色背景 */
  color: #333; /* 深灰色文字 */
  overflow: hidden; /* 防止内容溢出产生滚动条 */
  width: 100%;
  height: 100%;
}

/* 上下两部分布局 */
.top-section {
  flex: 2; /* 上半部分占比 2 */
  display: flex;
  border-bottom: 1px solid #e0e0e0; /* 细分隔线 */
}

.bottom-section {
  flex: 3; /* 下半部分占比 3 */
  padding: 20px;
  overflow-y: auto; /* 下半部分内容过多时允许滚动 */
  background-color: #f5f5f5; /* 下半部分背景与整体背景一致 */
}

/* 左右两部分布局，内部为白色背景 */
.unit-risk,
.process-risk-prediction {
  flex: 1;
  padding: 20px;
  overflow: auto;
  background-color: #ffffff; /* 单元格白色背景 */
  border-radius: 8px; /* 轻微圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
  margin: 10px; /* 添加一些外边距，使单元格更独立 */
}

.unit-risk {
  border-right: 1px solid #e0e0e0; /* 分隔线 */
}

/* 标题样式 */
h3 {
  color: #333; /* 标题颜色 */
  margin-bottom: 15px;
  border-bottom: 2px solid #eee; /* 标题下划线 */
  padding-bottom: 10px;
  font-size: 1.2em;
}

h4 {
  color: #555; /* 次级标题颜色 */
  margin-bottom: 10px;
  font-size: 1em;
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

th,
td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0; /* 表格内细线 */
}

thead tr {
  background-color: #f8f8f8; /* 表头背景色 */
  color: #555; /* 表头文字颜色 */
}

tbody tr:nth-child(even) {
  background-color: #fdfdfd; /* 隔行变色更柔和 */
}

tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* 风险级别颜色 */
.low-risk {
  color: #3cb371; /* 绿色 */
  font-weight: bold;
}

.medium-risk {
  color: #ffa500; /* 橙色 */
  font-weight: bold;
}

.high-risk {
  color: #ff4500; /* 红色 */
  font-weight: bold;
}

/* 事件发生可能性颜色 */
.low-likelihood {
  color: #3cb371;
  font-weight: bold;
}

.medium-likelihood {
  color: #ffa500;
  font-weight: bold;
}

.high-likelihood {
  color: #ff4500;
  font-weight: bold;
}

/* 实时风险点位图表网格布局 */
.realtime-charts-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  ); /* 自动适配列，最小宽度280px，每行最多四列 */
  gap: 20px;
}

.chart-item {
  background-color: #ffffff; /* 图表单元格白色背景 */
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影 */
  display: flex;
  flex-direction: column;
}

.chart-container {
  flex-grow: 1; /* 让图表容器填充可用空间 */
  height: 150px; /* 固定图表高度 */
  width: 100%;
  position: relative; /* 用于 Chart.js 响应式 */
}

.suggestion {
  font-size: 0.85em;
  margin-top: 10px;
  color: #666; /* 建议文字颜色 */
}
</style>
